<template>
  <div class="dp-index">
    <nav-header></nav-header>
    <div class="alert-box">
      <div class="alert-left">
        <div ref="threeCanvas" style="width: 90%; height: calc(100% - 80px);"></div>
        <!-- <img src="../../assets/images/ta1.png" alt="" /> -->
        <div class="details">
          <h5>铁塔信息</h5>
          <p>铁塔名称：<span>{{ towerDetails.towerName }}</span></p>
          <p>铁塔类型：<span>{{ towerDetails.towerType }}</span></p>
          <p>检修时间：<span>2025/01/01 10:20</span></p>
          <p>经纬度：<span>{{towerDetails.lat}}°；{{towerDetails.lon}}°</span></p>
          <p>风险等级：<span>中等</span></p>
        </div>
      </div>
      <div class="alert-right">
        <div class="title-box">
          <p>告警阀值配置</p>
          <span>Alarm threshold configuration</span>
        </div>
        <div class="details">
          <div class="teb-box">
            <span>普通</span>
            <span>严重</span>
          </div>
            <div class="details-item">
                <p>天线方位角告警阈值</p><span>{{dataDetails.azimuthNormal}}°</span><span>{{dataDetails.azimuthSerious}}°</span>
            </div>
            <div class="details-item">
                <p>天线俯仰角告警阈值</p><span>{{dataDetails.pitchNormal}}°</span><span>{{dataDetails.pitchSerious}}°</span>
            </div>
            <div class="details-item">
                <p>塔基沉降告警阈值</p><span>{{dataDetails.subsideNormal}}mm</span><span>{{dataDetails.subsideSerious}}mm</span>
            </div>
            <div class="details-item">
                <p>环境风速告警阈值</p><span>{{dataDetails.windNormal}}m/s</span><span>{{dataDetails.windSerious}}m/s</span>
            </div>
            <div class="details-item">
                <p>拉索拉力告警阈值</p><span>{{dataDetails.pullNormal}}T</span><span>{{dataDetails.pullSerious}}T</span>
            </div>
            <div class="details-item">
                <p>接地电阻告警阈值</p><span>{{dataDetails.resistanceNormal}}Ω</span><span>{{dataDetails.resistanceSerious}}Ω</span>
            </div>
            <div class="details-item">
                <p>天线移动距离告警阈值</p><span>{{dataDetails.distanceNormal}}m</span><span>{{dataDetails.distanceSerious}}m</span>
            </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import navHeader from "./components/navHeader.vue";
import { listAlarmset } from "@/api/system/alarmset";
import { listTower } from "@/api/system/tower";
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
export default {
  name: "systemSetting",
  components: {
    navHeader,
  },
  data() {
    return {
      dataDetails: {},
      towerDetails:{}
    };
  },
  mounted() {
    this.getData()
    this.getTower()
    this.initThreeJS();
  },
  methods: {
    initThreeJS() {
      const width = this.$refs.threeCanvas.clientWidth;
      const height = this.$refs.threeCanvas.clientHeight;
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
      const renderer = new THREE.WebGLRenderer();
      renderer.setClearColor(0x000000, 0); // 设置为透明，第二个参数为透明度（alpha）
      renderer.setSize(width, height);
      const ambientLight = new THREE.AmbientLight(0xffffff, 1);
      scene.add(ambientLight);
      const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
      directionalLight.position.set(5, 5, 5);
      scene.add(directionalLight);
      
      const controls = new OrbitControls(camera, renderer.domElement);
      camera.position.z = 5;
      controls.update(); // 更新控制器状态

      this.$refs.threeCanvas.appendChild(renderer.domElement);
      const loader = new GLTFLoader();
      loader.load(
        'models/new.glb', // GLTF model path
        (gltf) => {
          const material = new THREE.MeshStandardMaterial({ color: 0xffffff }); // 绿色
          gltf.scene.traverse(function(child) {
              if (child.isMesh) {
                  child.material = material;
              }
          });
          scene.add(gltf.scene);
          gltf.scene.rotation.x = Math.PI/-2; 
          gltf.scene.position.set(0, 0.7, 0);
          gltf.scene.scale.set(0.07, 0.07, 0.07);
        },
        undefined,
        (error) => {
          console.error(error);
        }
      );
 
      camera.position.z = 4.5;
      const animate = function () {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      };
      animate();
    },
    getData() {
      listAlarmset(this.queryParams).then(response => {
        this.dataDetails = response.rows[0]
      });
    },
    getTower(){
      listTower({
        pageNum: 1,
        pageSize: 1
      }).then(response => {
        this.towerDetails = response.rows[0];
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.dp-index {
  width: 100%;
  height: 100%;
  background: url("../../assets/images/map1.png") no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  .alert-box {
    width: 100%;
    padding: 30px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    flex: 1;
    .title-box {
      width: 100%;
      background: url("../../assets/images/title-bg.png") 0 0 no-repeat;
      display: flex;
      align-items: center;
      padding-left: 50px;
      margin-bottom: 20px;
      p {
        padding: 0;
        font-size: 22px;
        color: #fff;
        font-family: "youshe";
        margin: 0 20px 0 0;
      }
      span {
        font-size: 12px;
        text-transform: uppercase;
        color: #8ec7ff;
      }
    }
    .alert-left {
      width: 40%;
      height: 100%;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      img {
        width: 300px;
        display: block;
        margin-left: 60px;
      }
      .details {
        position: absolute;
        right: 10%;
        bottom: 10%;
        width: 260px;
        border-radius: 6px;
        background: rgba(2, 26, 65, 0.5);
        box-sizing: border-box;
        border: 1px solid #03fbff;
        padding-bottom: 10px;
        h5 {
          margin: 0;
          font-size: 16px;
          color: #fff;
          padding: 10px;
          box-sizing: border-box;
          border-bottom: 1px solid #03fbff;
        }
        p {
          margin: 5px 0 0 0;
          font-size: 14px;
          color: #fff;
          padding: 0 10px;
          box-sizing: border-box;
          span {
            color: #9e9e9e;
          }
        }
      }
    }
    .alert-right {
      width: 60%;
      .details{
        width: 100%;
        height: 90%;
        padding: 10px;
        box-sizing: border-box;
        border-radius: 8px;
        background: rgba(2, 26, 65, 0.5);
        .teb-box{
          display: flex;
          align-items: center;
          margin: 20px 0;
          color: #fff;
          padding-left: 320px;
          box-sizing: border-box;
          span{
            width: 200px;
            font-size: 16px;
            color: #fff;
            text-align: center;
            margin-right: 20px;
          }
        }
        .details-item{
            display: flex;
            align-items: center;
            margin: 20px 0;
            color: #fff;
            p{
                margin: 0 20px 0 0;
                font-size: 16px;
                color: #fff;
                width: 300px;
                text-align: right;
            }
            span{
                width: 200px;
                font-size: 14px;
                color: #fff;
                line-height: 32px;
                // background: rgba(2, 26, 65, 0.5);
                background: rgba(255, 140, 0, 0.5);
                padding: 0 10px;
                border-radius: 8px;
                text-align: center;
                margin-right: 20px;
                &:last-child{
                  background: rgba(255, 0, 0,0.5);
                }
            }
        }
      }
    }
  }
}
</style>
